<template>
  <span v-if="invisible"></span>
  <div v-else-if="widget === 'boolean_toggle'">
    <WBooleanToggle
      :type="type"
      :value_readonly="value_readonly"
      :value_edit="value_edit"
      :editable="editable"
      :data-info="dataInfo"
      :view-info="viewInfo"
      @on-change="onchange"
      @on-event="handleOnEvent"
    />
  </div>

  <!-- <div v-else-if="widget === 'boolean_favorite'">
    widget,boolean_favorite
    <WBooleanFavorite
      :value_readonly="value_readonly"
      :value_edit="value_edit"
      :editable="editable"
      :data-info="dataInfo"
      :view-info="{ ...viewInfo, node }"
      @on-change="onchange"
      @on-event="handleOnEvent"
    />
  </div> -->

  <div v-else-if="widget_todo">{{ [field.type, fname, widget] }}</div>

  <div v-else-if="type === 'cell'">
    <van-form>
      <template v-if="readonly || !editable">
        <van-field readonly>
          <template #label>
            <OLabel :data-info="dataInfo" :view-info="viewInfo" />
          </template>
          <template #input>
            <van-checkbox :value="value_display" shape="square" />
          </template>
        </van-field>
      </template>

      <template v-else>
        <van-field>
          <template #label>
            <OLabel :data-info="dataInfo" :view-info="viewInfo" />
          </template>
          <template #input>
            <van-checkbox
              v-model="value2"
              shape="square"
              @change="handleChange"
            />
          </template>
        </van-field>
      </template>
    </van-form>
  </div>

  <!-- <span v-else-if="readonly || !editable" :class="className">
    {{ [field.type, fname, value] }}
    <a-checkbox v-model="value_display" disabled />
  </span> -->

  <span v-else>todo: {{ [field.type, fname] }} </span>
</template>

<script>
import OFMixin from './OFMixin'
import OLabel from '../OLabel.vue'

import WBooleanToggle from './WBooleanToggle.vue'
// import WBooleanFavorite from './WBooleanFavorite.vue'

// import OCheckbox from './OInput/OCheckbox.vue'

export default {
  name: 'FBoolean',
  components: {
    OLabel,
    WBooleanToggle
    // WBooleanFavorite, OCheckbox
  },
  mixins: [OFMixin],
  props: {},
  data() {
    return {
      value2: false
    }
  },
  computed: {
    widget_todo() {
      // upgrade_boolean,  勾选后 , 触发 企业版 操作

      const done = []
      return done.includes(this.widget) ? '' : this.widget
    }
  },

  watch: {
    value: {
      // eslint-disable-next-line no-unused-vars
      handler: function (newVal, oldval) {
        // console.log('watch, value:', this.fname, newVal, oldval)
        this.initValue(newVal)
      },
      deep: true,
      immediate: true
    }
  },
  created() {},

  async mounted() {},

  methods: {
    initValue(value) {
      this.value2 = value
    },
    handleChange(value) {
      // console.log('handleChange', this.value2, value)
      this.onchange(value)
    }
  }
}
</script>

<style type="text/css"></style>
